<template>
	<div>
		<div class="content">
			<div class="contents">
				<div class="category">{{$t('indexTitle.title20')}}</div>
				<div class="promo-list">
					<img class="item" :src="baseURL+it.title_img" alt="" v-for="(it,index) in activityList" :key="index"
						@click="goAvcDetalis(it)" />
				</div>
			</div>
		</div>
		<div class="hover-container" v-if="showdetail">
			<div class="container">
				<div class="header">
					<img @click="showdetail = false" src="../../assets/images/cuohao.png" alt="" />
				</div>
				<div class="fixed-pt" :class="showtitle ? 'min':''">
					<img :src="baseURL+selectactivity.title_img" alt="" />
					<h1 class="title" v-if="!showtitle">{{selectactivity.title}}</h1>
					<div class="toggle-btn" :class="showtitle ? 'min':''" @click="showtitle = !showtitle"></div>
				</div>
				<div class="apply-btn" :class="showtitle ? 'min':''">
					<div class="btn">{{$t('indexTitle.title21')}}</div>
				</div>
				<div class="con" :class="showtitle ? 'min':''">
					<div v-html="selectactivity.title_content"></div>
					<div v-html="selectactivity.content"></div>
					<div v-html="selectactivity.rule_content"></div>
				</div>
			</div>
		</div>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>

</template>

<script>
	import {
		activityList
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				activityList: [],
				selectactivity: [],
				showdetail: false,
				showtitle: false,
				baseURL: process.env.VUE_APP_URL,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		components: {
			loadingFour
		},
		created() {},
		mounted() {
			this.getActivityList()
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getActivityList() {
				let that = this;
				let data = {
					page: 1
				}
				activityList(data).then((res) => {
					if (res.status.errorCode == 0) {
						console.log(res.data.data);
						this.activityList = res.data.data;
					} else {
						// this.$message.error(res.status.msg);
						this.$message({
							showClose: true,
							message: res.status.msg,
							type: 'error'
						});
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			goAvcDetalis(item) {
				this.showdetail = true
				this.selectactivity = item
			},
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.content {
		background: #0e0f12 url('../../assets/images/youhuibg.png') top/100% auto no-repeat;
		min-height: calc(100vh - 375px);
		padding: 40px 0;
	}

	.contents {
		margin: 0 auto;
		position: relative;
		width: 1200px;
	}

	.category {
		background-color: #5235ff;
		cursor: pointer;
		opacity: 1;
		color: #fff;
		font-size: 16px;
		height: 54px;
		width: 135px;
		line-height: 54px;
		margin-right: 5px;
		margin-top: 15px;
		min-width: 135px;
		padding: 0 15px;
		text-align: center;
	}

	.promo-list {
		margin-top: 20px;
	}

	.item {
		width: 100%;
		height: 187.5px;
		cursor: pointer;
		margin: 10px 0;
		transition: .3s ease;
	}

	.item:hover {
		transform: translateY(2px);
	}

	.hover-container {
		background-color: rgba(0, 0, 0, .7);
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1000;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.container {
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .8);
		height: 80vh;
		max-width: 1440px;
		position: relative;
		width: 70vw;
		max-height: 90vh;
		overflow: auto;
		background-color: #fff;
	}

	.header {
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		background-color: #5235ff;
		height: 50px;
		padding: 0 20px;
	}

	.header img {
		width: 30px;
		height: 30px;
		color: #fff;
		cursor: pointer;
		margin-right: -8px;
	}

	.fixed-pt {
		background-color: rgba(204, 204, 204, .1);
		box-shadow: 1px 0 0 0 rgba(204, 204, 204, .3);
		box-sizing: border-box;
		height: calc(100% - 50px);
		max-width: 350px;
		padding: 15px;
		position: absolute;
		top: 50px;
		transition: .2s ease;
		width: 35%;
		z-index: 1;
	}

	.fixed-pt.min {
		padding: 10px;
		width: 0;
	}

	.fixed-pt img {
		display: block;
		height: 50px;
		width: 100%;
	}

	.fixed-pt .title {
		font-size: 21px;
		line-height: 1.4;
		font-weight: 500;
		margin: 15px 0;
	}

	.toggle-btn {
		align-items: center;
		display: flex;
		height: 80px;
		justify-content: center;
		position: absolute;
		right: -40px;
		top: 50%;
		transform: translateY(-50%);
		width: 80px;
		z-index: 10;
	}

	.toggle-btn::after {
		speak: none;
		align-items: center;
		background-color: rgba(239, 239, 239, 0.9);
		box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 5px;
		color: rgb(82, 53, 255);
		content: "<";
		cursor: pointer;
		display: flex;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		height: 30px;
		justify-content: center;
		line-height: 1;
		text-indent: -2px;
		text-transform: none;
		width: 30px;
		font-family: iconmps !important;
		border-radius: 50%;
		font-variant: normal;
		transition: all 0.3s ease 0s;
	}

	.toggle-btn.min::after {
		content: ">";
		text-indent: 3px;
	}

	.toggle-btn:hover:after {
		background-color: #efefef;
		transform: translateY(2px);
	}

	.apply-btn {
		background: 0 0;
		bottom: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		left: 0;
		max-width: 350px;
		padding: 20px;
		position: absolute;
		transition: .2s ease;
		width: 35%;
		z-index: 5;
	}

	.apply-btn.min {
		max-width: 100%;
		width: 100%;
	}

	.btn {
		box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
		cursor: pointer;
		transition: .3s ease;
		font-size: 16px;
		height: 45px;
		line-height: 45px;
		padding: 0 30px;
		background-color: #5235ff;
		border: 0;
		border-radius: 22.5px;
		color: #fff;
	}

	.con {
		box-sizing: border-box;
		height: calc(100% - 50px);
		margin: 0 0 0 35%;
		overflow: auto;
		padding: 15px;
		width: 65%;
	}

	.con.min {
		margin-left: 0;
		padding: 20px 50px 80px;
		width: 100%;
	}
</style>